<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
    <!--图片插件-->
    <link rel="stylesheet" href="../css/thumbnail/baguetteBox.min.css">
    <link rel="stylesheet" href="../css/thumbnail/thumbnail-gallery.css">


    <!-- Font Awesome -->
    <link rel="stylesheet" href="../css/font-awesome/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../css/ionicons/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../css/AdminLTE/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="../css/skins/skin-blue.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../js/plugins/browserhacks/html5shiv.min.js"></script>
    <script src="../js/plugins/browserhacks/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery 3 -->
    <script src="../js/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="../js/plugins/bootstrap/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../js/plugins/adminlte/adminlte.min.js"></script>

    <script src="../js/plugins/thumbnail/baguetteBox.min.js"></script>
    <!--图片占位生成器-->
    <script src="../js/plugins/holder/holder.min.js"></script>


</head>
<body>
<div class="container">
    <div class="row" style="margin-top:10px">
        <div class="col-sm-2 text-right">
            <h5>查询条件</h5>
        </div>
        <div class="col-sm-8">
            <ol class="breadcrumb" style="margin-bottom:5px">
                <li><a href="#">首页</a></li>
                <li><a href="#">2018级</a></li>
                <li><a href="#">1班</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 text-right">
            <h5>信息</h5>
        </div>
        <div class="col-sm-8">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="姓名/学号/18级1班班委">
                <span class="input-group-btn">
                    <button class="btn   btn-primary" type="button">查询</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 text-right">
            <h5>年级</h5>
        </div>
        <div class="col-sm-8">
            <a class="btn btn-link" href="#">2019级</a> <a class="btn btn-link" href="#">2018级</a> <a
                class="btn btn-link" href="#">2017级</a> <a class="btn btn-link" href="#">2016级</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 text-right">
            <h5>班级</h5>
        </div>
        <div class="col-sm-8">
            <a class="btn btn-link" href="#">1班</a> <a class="btn btn-link" href="#">2班</a>
        </div>
    </div>
</div>
<div class="container gallery-container">
    <div class="tz-gallery">
        <div class="row">

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <a class="lightbox" href="#">
                        <img src="holder.js/100px300" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>孙悟空 <small>18级1班 班长 就业 ETC-4</small></h3>
                        <p>
                            <strong>湖南长沙</strong><br>
                            手机: 135 1234 1234<br>
                            QQ: 7123 123312<br>
                            互联网创新实验室<br>
                            学生会  副主席<br>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    baguetteBox.run('.tz-gallery');
</script>
</body>
</html>